<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">客户管理</h3>

                <div class="box-tools">
                    <div class="input-group input-group-sm" style="width: 350px;">
                        <input type="text" name="table_search" id="searchNameId"
                               class="form-control pull-right" placeholder="客户联系方式">

                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
                            </button>
                            <button type="button" class="btn btn-default btn-add">添加</button>
                            <button type="button" class="btn btn-default btn-update">修改</button>
                            <button type="button" class="btn btn-default btn-delete">删除</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>编号选择</th>
                        <th>用户编号</th>
                        <th>店铺编号</th>
                        <th>微信昵称</th>
                        <th>头像</th>
                        <th>性别</th>
                        <th>联系方式</th>
                        <th>省</th>
                        <th>市</th>
                        <th>最近一次购买时间</th>
                        <th>积分</th>
                        <th>注册时间</th>
                    </tr>
                    </thead>
                    <tbody id="tbodyId"></tbody>
                </table>
            </div>
            <div id="pageId" class="box-footer clearfix">
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#pageId").load("doPageUI", function () {
            doGetObjects();
        });
        $(".input-group-btn")
            .on("click", ".btn-search", doQueryObjects)
            .on("click", ".btn-add,.btn-update,.btn-delete", doLoadEditUI);

        $("tbody").on("click", ".btn-valid", doValidById);
    });

    function doLoadEditUI() {
        //1.判定点击的对象
        var title;
        if ($(this).hasClass("btn-add")) {
            title = "添加客户";
            doLoadPage(title);
        } else if ($(this).hasClass("btn-update")) {
            title = "修改客户";
            var id = doGetCheckedId();
            console.log("id=" + id)
            if (!id) {
                alert("请先选择");
                return;
            }
            //基于id进行查询并加载编辑页面
            doFindObjectById(id, title);
        } else if ($(this).hasClass("btn-delete")) {
            var id = doGetCheckedId();
            console.log("id=" + id)
            if (!id) {
                alert("请先选择");
                return;
            }
            let ids = {"ids": id}
            //基于id删除
            $.post("/client/remove", ids, function (result) {
                if (result.state == 1) {
                    alert("删除成功")
                    doGetObjects()
                } else {
                    alert(result.message)
                }
            })
        }

    }

    function doFindObjectById(id, title) {
        //1.params
        var params = {"id": id};
        //2.url
        var url = "client/id";
        //3.ajax request
        $.getJSON(url, params, function (result) {//JsonResult
            if (result.state == 1) {
                $("#mainContentId").data("rowData", result.data);
                doLoadPage(title,result.data.id);
            } else {
                alert(result.message);
            }
        });
    }

    function doGetCheckedId() {
        return $("tbody input[name='radioId']:checked").val();
    }

    function doLoadPage(title,id) {
        if(id){
            var url = "client/edit/"+id
        }else{
            var url = "client/edit/"+1
        }
        $("#mainContentId").load(url, function () {
            $(".box-title").html(title);
        })
    }

    //禁用和启用操作
    function doValidById() {
        //params
        var rowData = $(this).parents("tr").data("rowData");
        var id = rowData.id;
        var newValid = rowData.valid ? 0 : 1;
        var params = {"id": rowData.id, "valid": newValid};
        //url
        var url = "client/doValidById";
        //ajax request
        var btn = $(this);//获取点击的button对象
        $.post(url, params, function (result) {
            if (result.state == 1) {
                alert(result.message);
                //doGetObjects();//重新查询刷新
                //优化方式实现(局部刷新:修改button显示,修改td内容显示)
                doEditRow(btn, rowData.valid);
            } else {
                alert(result.message);
            }
        })
    }

    function doEditRow(obj, valid) {
        //1.修改按钮上的内容
        $(obj).html(valid ? "启用" : "禁用");
        //2.修改tr中第5个td中的内容(查询API文档)
        var tr = $(obj).parents("tr");
        tr.find("td:eq(5)").text(valid ? "禁用" : "启用");
        //3.获取当前行tr对象，然后重新绑定新的值
        var rowData = tr.data("rowData")
        rowData.valid = valid ? 0 : 1;
        tr.data("rowData", rowData);
    }

    //处理查询按钮事件
    function doQueryObjects() {
        $("#pageId").data("pageCurrent", 1);
        doGetObjects();
    }

    //页面加载完成异步加载当前页数据
    function doGetObjects() {
        var url = "client/list";
        var pageCurrent = $("#pageId").data("pageCurrent");
        if (!pageCurrent) pageCurrent = 1;
        var params = {"pageCurrent": pageCurrent}
        params.mobile = $("#searchNameId").val().trim();
        console.log(params);
        $.getJSON(url, params, function (result) {
            console.log(result);
            doHandleResponseResult(result);
        });
    }

    function doHandleResponseResult(result) {
        if (result.state == 1) {
            doSetTableBodyRows(result.data.records);
            doSetPagination(result.data);
        } else {
            alert(result.message);
        }
    }

    //通过服务端返回的数据初始化页面
    function doSetTableBodyRows(data) {
        //1.获取tbody对象，并清空内容
        var tBody = $("#tbodyId");
        tBody.empty();
        //2.迭代data内容将数据追加到tbody中
        for (var i in data) {
            var tr = $("<tr></tr>");
            tr.data("rowData", data[i]);
            var tds = doCreateTds(data[i]);
            tr.append(tds);
            tBody.append(tr);
        }
    }

    function doCreateTds(row) {
        let imgUrl = row.avatarUrl==""||row.avatarUrl==undefined?"/img.png":row.avatarUrl
        var tds = "<td><input type='radio' name='radioId' value='" + row.id + "' ></td>" +
            "<td>" + row.id + "</td>" +
            "<td>" + (row.shopId ? row.shopId : '未分配') + "</td>" +
            "<td>" + row.nickName + "</td>" +
            "<td><img style='height: 80px;width: 100px' src='"+imgUrl+"'></td>" +
            "<td>" + (row.gender ==1 ? '男': '女')+ "</td>" +
            "<td>" + row.mobile + "</td>" +
            "<td>" + row.province + "</td>" +
            "<td>" + row.city + "</td>" +
            "<td>" + new Date(row.lastLoginTime).toLocaleString() + "</td>" +
            "<td>" + row.score + "</td>" +
            "<td>" + new Date(row.registerTime).toLocaleString() + "</td>"
        console.log(row);
        return tds;
    }
</script>




